<template>
    <div id="flag">
        <div class="top">
            <div class="tit">我要做到</div>
            <input type="text" placeholder="在下面选择一个或输入一个（10字内）" maxlength="10" v-model="flag">
        </div>

        <div class="tagList">
            <div :class="{'tagSelect':index==flagIndex}" class="tag" v-for="(item,index) of listData" :key="index" @click="selectItem(item,index)">{{item}}</div>
        </div>

        <div class="btn-wrapper">
            <div class="btn" @click="toLimit">定个时间</div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'vant';
export default {
    name:'flag',
    data() {
        return {
            flagIndex:-1,
            flag:'',
            listData:[
                '瘦十斤',
                '毕业前绝不谈恋爱',
                '上王者',
                '向喜欢的人表白',
                '实现财务自由',
                '读10本书',
                '去现场看爱豆!',
                '逢考必过',
                '练出八块腹肌',
                '学会拒绝会说“不”',
                '工资翻倍',
                '脱单',
                '做个堕落的富婆',
                '买车又买楼',
                '早睡早起',
                '绝不熬夜',
                '再喝奶茶我就是狗',
                '背5000个英语单词',
                '考上理想的学校'
            ]
        }
    },
    methods: {
        selectItem(item,index){
            this.flag=item;
            this.flagIndex=index
        },
        toLimit(){
            if(!this.flag){
                Toast('请先填写flag');
                return
            }
            this.$bus.$data.flag=this.flag;
            this.$router.push('LimitTime')
        },
    },
}
</script>
<style lang="scss" scoped>
    .top{
        padding:0 20px;
        font-size: 30px;
        line-height: 30px;
        text-align: left;
        .tit{
            padding:20px 0;
        }
        input{
            padding:10px 0;
            font-size: 30px;
            line-height: 30px;
            border:none;
            border-bottom: 4px solid #eee;
            width:100%;
        }
    }

    //选项
    .tagList{
        display: flex;
        flex-wrap: wrap;
        margin-top:20px;
        // justify-content: space-around;
        .tag{
            margin:10px 20px;
            border-radius: 10px;
            border:2px solid #eee;
            padding:10px 30px;
        }
        .tagSelect{
            color:#fff;
            background-color: #d23e3d
        }
    }

    .btn-wrapper{
        .btn{
            font-size: 40px;
            padding:20px 40px;
            color:#fff;
            width:300px;
            border-radius: 30px;
            margin:100px auto 0;
            background-color: #d23e3d
        }
    }
</style>